<template>
  <el-form-item label="默认值" v-if="state.activeData._config_.dataType === 'static'">
    <el-cascader
      :options="state.activeData.options"
      clearable
      :show-all-levels="activeData['show-all-levels']"
      :props="state.activeData.props"
      filterable
      v-model="state.activeData._config_.defaultValue"
      :key="state.cascaderKey"
    ></el-cascader>
  </el-form-item>
  <el-form-item label="选项分隔符">
    <el-input v-model="state.activeData.separator" placeholder="请输入选项分隔符" />
  </el-form-item>

  <el-divider>数据选项</el-divider>
  <el-form-item label="" label-width="40px">
    <el-radio-group v-model="state.activeData._config_.dataType" size="small" style="text-align: center" @change="dataTypeChange">
      <el-radio-button label="static">静态数据</el-radio-button>
      <el-radio-button label="dictionary">数据字典</el-radio-button>
    </el-radio-group>
  </el-form-item>
  <el-form-item>
    <template v-if="state.activeData._config_.dataType === 'static'">
      <!-- 级联选择静态树 -->
      <el-tree
        :data="state.activeData.options"
        node-key="id"
        :expand-on-click-node="false"
        class="filter-tree"
        :props="state.props"
      >
        <!-- :render-content="renderContent"  -->
        <template #default="{ node, data }">
          <span class="enumText">{{ data.label }}</span>
          <div class="custom-tree-node">
            <span @click.stop="append(data)" :icon="CirclePlus"> </span>
            <span @click.stop="remove(node, data)" :icon="Delete"> </span>
          </div>
        </template>
      </el-tree>
      <div style="margin-left: 20px">
        <el-button style="padding-bottom: 0" icon="el-icon-circle-plus-outline" text @click="addTreeItem">添加父级</el-button>
      </div>
    </template>
    <template v-if="state.activeData._config_.dataType === 'dictionary'">
      <el-form-item label="远端数据">
        <TreeSelect
          :options="state.treeData"
          v-model="state.activeData._config_.dictionaryType"
          placeholder="请选择数据字典"
          last-level
          clearable
        >
        </TreeSelect>
      </el-form-item>
      <el-form-item label="存储字段">
        <el-select v-model="state.activeData.props.value" placeholder="请选择存储字段">
          <el-option label="id" value="id"></el-option>
          <el-option label="enCode" value="enCode"></el-option>
        </el-select>
      </el-form-item>
    </template>
  </el-form-item>
  <el-divider />

  <el-form-item label="展示全路径">
    <el-switch v-model="state.activeData['show-all-levels']" />
  </el-form-item>
  <el-form-item label="能否清空">
    <el-switch v-model="state.activeData.clearable" />
  </el-form-item>
  <el-form-item label="能否搜索">
    <el-switch v-model="state.activeData.filterable" />
  </el-form-item>
  <el-form-item label="能否多选">
    <el-switch v-model="state.activeData.props.multiple" @change="onChange" />
  </el-form-item>
  <el-form-item label="是否禁用">
    <el-switch v-model="state.activeData.disabled" />
  </el-form-item>
  <el-form-item label="是否必填">
    <el-switch v-model="state.activeData._config_.required" />
  </el-form-item>
  <!-- <el-form-item label="显示标签">
      <el-switch v-model="state.activeData._config_.showLabel" />
    </el-form-item> -->
  <CascaderTreeNode ref="CascaderTreeNodeRef" title="添加选项" @commit="addNode" />
</template>
<script setup lang="tsx" name="GoodCascader">
import { defineAsyncComponent, reactive, watch, ref } from "vue";
import dictTypeApi from "@/api-services/apis/system/dictTypeApi";
import dictDataApi from "@/api-services/apis/system/dictDataApi";
import { CirclePlus, Delete } from "@element-plus/icons-vue";
const CascaderTreeNode = defineAsyncComponent(() => import("./TreeNodeDialog.vue"));
const CascaderTreeNodeRef = ref();
const props = defineProps({
  activeData: {
    type: Object,
    default: () => ({})
  }
});
const state = reactive({
  activeData: {} as any,
  treeData: [] as any[],
  currentNode: [] as any[],
  props: {
    value: "value",
    label: "label",
    children: "children"
  },
  cascaderKey: +new Date()
});
const propsData = toRef(props);
state.activeData = propsData.value.activeData;

watch(
  () => state.activeData._config_.dataType,
  () => {
    dataTypeChange();
  }
);
watch(
  () => state.activeData._config_.dictionaryType,
  val => {
    state.activeData._config_.defaultValue = [];
    if (!val) {
      state.activeData.options = [];
      return;
    }
    dictDataApi.getDatalistByTypeId(val).then(res => {
      state.activeData.options = res.data.data;
    });
  }
);
const emits = defineEmits(["updateActiveData"]);
watch(
  () => state.activeData,
  val => {
    emits("updateActiveData", val);
  }
);
const created = () => {
  getDictionaryType();
};
const getDictionaryType = async () => {
  dictTypeApi.list(null).then(res => {
    state.treeData = res.data.data;
  });
};

const openDialog = () => {
  CascaderTreeNodeRef.value.open();
};

const addTreeItem = () => {
  openDialog();
  state.currentNode = state.activeData.options;
};
const addNode = (data: any) => {
  state.currentNode.push(data);
};
const append = (data: any) => {
  if (!data.children) {
    data.children = [];
  }
  openDialog();
  state.currentNode = data.children;
};
const remove = (node: any, data: any) => {
  state.activeData._config_.defaultValue = []; // 避免删除时报错
  const { parent } = node;
  const children = parent.data.children || parent.data;
  const index = children.findIndex((d: any) => d.id === data.id);
  children.splice(index, 1);
};
const onChange = () => {
  state.cascaderKey = +new Date();
  state.activeData._config_.renderKey = +new Date();
  state.activeData._config_.defaultValue = [];
};
const dataTypeChange = () => {
  state.cascaderKey = +new Date();
  state.activeData._config_.renderKey = +new Date();
  state.activeData._config_.defaultValue = [];
  state.activeData.options = [];
  state.activeData.props.value = "value";
  state.activeData.props.label = "label";
  state.activeData.props.children = "children";
  state.activeData._config_.dictionaryType = "";
};

created();
</script>
<style lang="scss" scpoed>
.custom-tree-node {
  display: flex;
  justify-content: space-between;
  width: 100%;
  font-size: 14px;
  .node-operation {
    float: right;
  }
  i[class*="el-icon"] + i[class*="el-icon"] {
    margin-left: 6px;
  }
  .el-icon-plus {
    color: #409eff;
  }
  .el-icon-delete {
    color: #157a0c;
  }
}
.tree-h-flex {
  display: flex;
}
.tree-h-left {
  flex: 1;
  width: 100%;
}
.tree-h-right {
  width: 42px;
  min-width: 42px;
}
.filter-tree {
  padding-bottom: 8px;
  margin-bottom: 5px;
  font-size: 14px;
}
.buttons-container {
  margin-left: auto;
}
.buttons-container span {
  padding-right: 5px;
  margin-left: 10px;
}
.filter {
  box-sizing: border-box;
  width: 280px;
  padding: 0;
  margin-right: 10px;
  .title {
    margin: 0 0 15px;
    font-size: 18px;
    font-weight: bold;
    color: var(--el-color-info-dark-2);
    letter-spacing: 0.5px;
  }
  .el-input {
    width: 150px;
    margin: 0 0 10px;
  }
  .el-scrollbar {
    :deep(.el-tree) {
      height: 80%;
      overflow: auto;
      .el-tree-node__content {
        height: 33px;
      }
    }
    :deep(.el-tree--highlight-current) {
      .el-tree-node.is-current > .el-tree-node__content {
        background-color: var(--el-color-primary);
        .el-tree-node__label,
        .el-tree-node__expand-icon {
          color: white;
        }
        .is-leaf {
          color: transparent;
        }
      }
    }
  }
}
</style>
